<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>蓝河系统卡片生成工具</title>
  <script src="<< url_for('static', filename='js/marked.min.js') >>"></script>
  <script src="<< url_for('static', filename='js/vue.js') >>"></script>
  <script src="<< url_for('static', filename='js/jquery-3.7.1.min.js') >>"></script>
  <link rel="stylesheet" type="text/css" href="<< url_for('static', filename='css/index.css') >>" />
  <link rel="stylesheet" type="text/css" href="<< url_for('static', filename='css/card.css') >>" />
</head>

<body>
  <div id="app" class="chat-container">
    <div class="chat-header">
      <div style="display: flex;">
        <img style="width: 90px;" src="https://www.blueos.com.cn/static/img/blue-logo-white.a8b77b31.svg" />
        卡片生成工具
      </div>
    </div>
    <div class="chat-messages" id="chatMessages">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
        <div class="message-inner">
          <div class="avatar-container">
            <div class="avatar"></div>
            <div class="name">{{ message.name }}</div>
          </div>
          <div class="content-container">
            <div class="content" v-html="message.content"></div>
            <template v-if="message.status == 'complete'">
              <!--?              <h4>设计预览图</h4>-->
              <div class="preview-container">
                <div class="container">
                  <!-- AI内容start -->
                  <div :class="`card size-${message.json_data.size}`"
                    :style="`background-image: url(${message.json_data.background})`">
                    <div class="card-title">{{message.json_data.title}}</div>
                    <div class="card-value">{{message.json_data.initData}}</div>
                    <div class="card-desc">{{message.json_data.desc}}</div>
                  </div>
                  <!-- AI内容end -->
                </div>
              </div>
              <span>代码下载链接：</span>
              <div class="file-container">
                <a class="download-link" :href="`/code/download?file_name=${message.filename}`">{{message.filename}}</a>
              </div>
            </template>

          </div>

        </div>
      </div>
      <div class="loading-indicator" v-if="isThinking">
        <div class="spinner"></div>
        <div class="thinking-text">小卡正在思考...</div>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" v-model="userInput" @keyup.enter="sendMessage" placeholder="输入您的消息...">
      <button @click="sendMessage">发送</button>
    </div>
    <div class="chat-footer">开放原子大赛（苍穹队研发）</div>
  </div>
  <script src="<< url_for('static', filename='js/index.js') >>"></script>
</body>

</html>